<script setup>
import { RouterView, useRouter } from 'vue-router';
import { ref, onMounted,computed  } from 'vue'
import axios from 'axios'
const array = ref([
  {
    name: '技术咨询'
  },
  {
    name: '商务咨询'
  },
  {
    name: '技术热线'
  },
  {
    name: '商务热线'
  }
])
const a = ref(0)
const addOne = () => {
  a.value += 1
}
const addABtn = () => {
  addOne()
  array.value.push({
    name: '新按钮' + a.value
  })
}
const showArray = () => {
  alert(JSON.stringify(array.value))
}
const router = useRouter()
const goToAbout = () => {
  router.push('/about');
}
const response = ref(undefined);
const loadRemoteData =  () => {
  axios({
    url: 'https://schedule-api.bihuoa.cn/admin-api/biz/open/listEffectLeafBudgetBore'
  }).then(res=>{
    response.value = res
  })
}
onMounted(()=>{
  loadRemoteData();
})
const a100 = computed(()=>{
  return a.value * 100 + array.value.length;
})
const firstName = computed(()=>{
  console.log(list);
  console.log(list.value);
  if(list.value && list.value.length>0){
  return list.value[0].name
  }else{
    return '----'
  }
})
const list = computed(()=>{
  if(!response.value){
    return []
  }
  return response.value?.data.data
})
</script>

<template>
  <div >
    <div style="color: red;">{{ firstName }}</div>
    <div>
      {{ a }}
    </div>
    <div style="blue"> {{  a100 }}</div>
    <button @click="addOne">+1</button>
  </div>
  <div>
    <button @click="addABtn">按钮+1个</button>
    <button @click="showArray">显示数组内容</button>
    <button @click="goToAbout">进入About页面</button>
  </div>

  <div>
    <table style="width: 300px">
    <tr>
      <td>ID</td>
      <td>名称</td>
    </tr>
    <tr v-for="item in list" :key="item.id">
      <td>
        {{ item.id }}
      </td>
      <td>
        {{ item.name }}
      </td>
    </tr>
  </table>
  </div>
  <RouterView />
  <div style="height: 5000px;"></div>
  <div class="right-float-group">
    <div v-for="(item, index) in array" :key="index" class="btn">
      <img class="btn-img" src="https://haiwell.com/public/images/flag/cn.gif" />
      <div>
        {{ item.name }}
      </div>
    </div>

  </div>
</template>

<style scoped>
.right-float-group {
  position: fixed;
  top: 10vh;
  right: 10px;
}

.btn {
  width: 68px;
  height: 60px;
  margin-bottom: 2px;
  padding-top: 12px;
  color: #ffffff;
  background-color: #4e97d9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0px 0px;
}

.btn-img {
  width: 18px;
  height: 18px;
}
td {
  border: 1px black dotted;
}
</style>
